import React, { useState } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { Button, Row, Col, List, Icon } from 'antd'
import axios from 'axios'
import Header from '../components/Header/Header'
import Author from '../components/Author/Author'
import Advert from '../components/Advert/Advert'
import Footer from '../components/Footer/Footer'
import { CalendarOutlined, FolderOutlined, FireOutlined } from '@ant-design/icons';
import servicePath from '../config/apiUrl'
import marked from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';

export default function Home(list) {

  // console.log(list);
  const [mylist, setMylist] = useState(list.data)
  const renderer = new marked.Renderer()
  marked.setOptions({                     // 自定义的Renderer渲染出的格式
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code) {          // 设置代码高亮
      return hljs.highlightAuto(code).value;
    }
  });


  return (
    <div >
      <Head>
        <title>zengjichaoren's blog</title>
        {/* <meta name="description" content="Generated by create next app" /> */}
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify='center'>
        <Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14}>
          <List
            header={<div>最新文章</div>}
            itemLayout="vertical"
            dataSource={mylist}
            renderItem={item => (
              <List.Item>
                <div className='list-title'>
                  <Link href={{ pathname: '/detail', query: { id: item.id } }}><a>{item.title}</a></Link>
                </div>
                <div className='list-icon'>
                  <CalendarOutlined /><span> {item.addTime}</span>
                  <FolderOutlined /><span> {item.typeName}</span>
                  <FireOutlined /><span>{item.view_count}</span>
                </div>
                <div className='list-context' dangerouslySetInnerHTML={{__html:marked(item.introduce)}}></div>
              </List.Item>
            )}
          />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer />
    </div>
  )
}

Home.getInitialProps = async () => {    // 使用axios向后端接口请求数据资源
  const promise = new Promise((resolve) => {
    axios(servicePath.getArticleList).then(
      (res) => {
        // console.log(res.data+'!!!!!!!!!!!!!!');
        resolve(res.data)
      }
    )
  })
  return await promise
}

